<template>
	<view class="p-20">
	<!-- 	<u-form :model="form" ref="uForm" class="u-p-20" label-width="150">
			<u-form-item label="手机号" prop="phone">
				<u-input placeholder="请填写手机号" v-model="form.phone" />
			</u-form-item>
			<u-form-item label="验证码" prop="code">
				<view class="u-flex u-row-between">
					<u-input placeholder="请填写验证码" v-model="form.code" />
					<u-toast ref="uToast"></u-toast>
					<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
					</u-verification-code>
					<u-button @tap="getCode">{{tips}}</u-button>
				</view>

			</u-form-item>

		</u-form> -->
		
			<navbar title="完善信息" />
		
		<u--form labelPosition="left" :model="form" :rules="rules" ref="form" errorType="toast" labelWidth="200rpx" labelAlign="right">
			<u-form-item v-if="isBindPhone" label="绑定手机" prop="account" borderBottom >
				<u--input v-model="form.phone" border="none" placeholder="请输入手机号"></u--input>
			</u-form-item>
			<u-form-item v-if="isBindPhone" label="验证码" prop="account" borderBottom >
				<view class="u-flex u-row-left">
				<view><u--input v-model="form.code" border="none" placeholder="请输入验证码"></u--input></view>
				<view class="wrap">
					<u-toast ref="uToast"></u-toast>
					<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" 
					@change="codeChange"></u-code>
					<view @tap="getCode" style="color: #F0AD4E;">{{tips}}</view>
				</view>
				</view>
			</u-form-item>
			<u-form-item label="推荐人编号" prop="spreadUid" borderBottom v-if="isBindSpread">
				<u--input v-model="form.spreadUid" border="none" placeholder="请输推荐人编号"></u--input>
			</u-form-item>
			
		
		</u--form>

	
		<view style="margin-top: 30rpx;"><u-button  @click="submit()" type="success" shape="circle" class="p-20 "> 提交</u-button></view>
		<view style="margin-top: 30rpx;"><u-button  @click="goHome()" type="success" shape="circle" class="p-20 "> 返回首页</u-button></view>
	</view>
</template>

<script>
	import {sendCode,bindAuthInfo} from '@/api/user.js'
	import navbar from '@/components/baseNavbar.vue'
	import {
		getConfig,
	} from "@/api/public.js"
	export default {
		components:{navbar},
		data() {
			return {
				tips: '',
				seconds: 60,
				form: {
					phone:'',
					spreadUid:''
				},
				
				rules: {
					
				},
				flag:true,
				userInfo:{}
				
			};
		},
		onLoad() {
			
		getConfig("sms_time").then(res=>{
			this.seconds = parseInt(res.data.value)			
		})
		},
		onShow() {
			let that = this 
			this.$store.dispatch("USERINFO", true).then((res) => {
				that.userInfo = res
			});
			let spreadUid = this.$store.getters.spreadUid
			if(spreadUid!='')
			this.form.spreadUid = spreadUid
		},
		computed:{
			isBindSpread(){
				return !(this.userInfo.spreadUid >0)
			},
			isBindPhone(){
				return !(this.userInfo.phone !="")
			}
		},
		methods: {
			goHome(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			getCode() {
				if(!this.flag)return 
				if(!this.$u.test.mobile(this.form.phone)){
					return this.$u.toast('请输入正确的手机号');
				}
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				})
				sendCode({phone:this.form.phone}).then(res=>{
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					this.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				}).catch(err=>{
					uni.hideLoading();
				})
			},
			end() {
				this.flag=true
			},
			start() {
				this.flag=false
			},
			codeChange(text) {
				this.tips = text;
			},
			
			submit() {
				if(this.isBindPhone && !this.$u.test.mobile(this.form.phone)){
					return this.$u.toast('请输入正确的手机号');
				}
				if(this.isBindPhone &&  !this.$u.test.code(this.form.code, 6)){
					return this.$u.toast('请输入6位数的验证码');
				}
				
				if(this.isBindSpread && (this.form.spreadUid=='' || this.form.spreadUid==0)){
					return this.$u.toast('请输入推荐人编号');
				}
				bindAuthInfo({phone:this.form.phone,code:this.form.code,spreadUid:this.form.spreadUid}).then(res=>{
					this.$u.toast('编辑成功');
					this.goHome()
				})
			
			}
		},
		
		onReady() {
			
		}
	};
</script>
<style>
</style>
